<?php
$screen = Blyn::app()->getCurrentNode()->getUIManager()->getCurrentScreen();

//register views for ajaxUrl
$ajaxLinkId = $screen->getAjaxLinkId('joinServiceBtn');

$url = $screen->getLinkUrl(array('bilyn_ajaxLink' => $ajaxLinkId));

$model = $screen->joinServiceModel;

$services = $screen->findServices($model->searchText);
?>
<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(function($) {
        //alert("hello");
        jQuery('a[rel="tooltip"]').tooltip();
        jQuery('a[rel="popover"]').popover();
        jQuery('a[rel="popover"]').click(function(){           
            //$(this).css({'margin':'0 auto 0 auto','top':'20%','left':'20%'});    
           // $(this).center();
        });       
    });
    
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
            $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
            $(window).scrollLeft()) + "px");
        return this;
    }
    /*]]>*/
    function request_join_service(serviceId)
    {
        //alert(serviceId);
        var message = (document.getElementById("joinservice_message"+serviceId).value);
        var applyingRole = $("input:radio[name ='applyingRole']:checked").val();        
        //document.getElementById("joinservice_message"+serviceId).focus();
        //alert("#joinbtn" + serviceId);        
         
        $.ajax({
            type:'POST',
            url:'<?php echo $url; ?>',
            data:{'joined_serviceId':serviceId,'join_service_message':message,'applyingRole':applyingRole},
            success:function(html){
                $('#leftbar').html(html);
                $("#joinbtn" + serviceId).addClass('disabled btn-warning').text('Joined already');
                $("#joinbtn" + serviceId).popover('hide');
            }       
            
        });
        
    }
    
</script>

<?php
foreach ($services as $service) {
    $serviceName = $service->getName();
    //   $ajaxJoinBtn = $screen->buildAjaxLink('joinServiceBtn', 'Join to service', 'leftMenu', NULL, array('update' => "#leftbar", 'type' => 'post'), array('id' => 'joinBtn' . $service->getId(), 'class' => 'btn'));
    $serviceId = $service->getId();
    $senderPermits = $screen->getSenderPermits($serviceId);
    $allowRoles = current($senderPermits);
    ?>
    <div class="well well-small">
        <strong>Service Name: <?php echo $serviceName; ?></strong><br>
        Normal service<br>
        San Francisco, CA 94107     
        <div class="pull-right">
            <a href="#" id ='<?php echo "joinbtn" . $serviceId; ?>'  class="btn" rel="popover" data-placement="left" 
               data-html="true" 
               data-content= "               
               <?php
               $i = 0;
               foreach ($allowRoles as $role) {
                   $i++;
                   ?>
                   <label class='radio'>
                   <input type='radio' name='applyingRole' id='radion<?php echo $i; ?>' value='<?php echo $role; ?>' checked>
                   Join to <?php echo $role; ?>.
                   </label>
               <?php }; ?>               
               <label>More messages:</label>
               <textarea rows='2' id='joinservice_message<?php echo $serviceId; ?>'></textarea>
               <div class='pull-left'><a href='#' class='btn' onclick='request_join_service(<?php echo $serviceId; ?>)'>Send Request</a> </div>              
               " 
               data-original-title="Join to service:">Join to service</a>
        </div>       
    </div>
<?php } ?>




